<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="css/public.css" media="all">
    <!--    1.引入js-->
    <script src="lib/echarts.min.js"></script>
    <script src="lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style>
        .dv{
            width: 90%;
            margin-left: 5%;
            height: 500px;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-lg12">
            <div class="dv" id="dv1"></div>
        </div>
        <div class="layui-col-lg12">
            <div class="dv" id="dv2"></div>
        </div>
    </div>
</div>
<script>
    $(function (){
        loadSexTj();
    })
    //1.实现学员性别人数统计 饼状图
    function loadSexTj(){
        //获取对应的标签 div
        var dv = document.getElementById('dv1');
        //完成Echarts初始化
        var chart = echarts.init(dv);
        var option = {
            title: {
                text: '维修情况查询',
                subtext: '数据来源内部系统',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: '人数',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 1, name: '暂未处理' },
                        { value: 1, name: '正在处理' },
                        { value: 1, name: '处理完毕' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        chart.setOption(option);

        //请求接口 Ajax
        $.get("/api/logistics/statetj.do",(res)=>{
            option.series[0].data=res.data;
            chart.setOption(option);
        })
    }
    //2.统计学历的人数 柱状图和折线图 可以自由切换

</script>
</body>
</html>